<template>
<!-- 具名插槽 -->
    <div class="container">
        <!-- 简单header直接传， 复杂用插槽 -->
        <header v-if="$slots.header || header">
            <slot name="header">{{header}}</slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>
<script>
export default {
  props: {
    header: String
  },
  methods: {
    test() {
      console.log(this.$slots);
    }
  },
  mounted() {
    this.test();
  }
};
</script>
